import { defineComponent } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';
import RulerProgress from './components/rulerProgress';
import Collapse from './components/collapse';

export default defineComponent({
  name: 'VideoClip',
  props: {
    mode: {
      type: String,
      default: 'frame'
    },
    video: {
      type: Object,
      default: () => {
        return {
          name: '',
          url: ''
        }
      }
    }
  },
  setup(props) {
    const {
      state,
      methods,
      videoName,
      currentTime,
      maxTime,
      videoRuler,
      frameList,
      layoutStyle,
      layoutList,
      layout,
      aroundFrameList,
      frameControl,
      percentageComputed,
      loading,
      videoTip
    } = useModule(props);
    return () => (
      <div class={styles.videoClip}>
        <div class={styles.videoClipHeader}>
          <div class={styles.logo}>
            <div class={styles.logoImg}>
              <i class={' el-icon-video-camera-solid'}></i>
            </div>
            <div class={styles.toolName}>
              <h1>视频剪辑工具</h1>
              <h2>捕捉精彩，一帧不差</h2>
            </div>
          </div>
        </div>
        <div class={styles.videoClipBody}>
          <Collapse
            min-width={methods.calcLayout().width}
            scopedSlots={{
              left: () => (<div style='height: 100%; padding: 10px 5%;'>
                <div class={styles.videoTip}>
                  {
                    videoTip[state.mode].map(item => {
                      return <section
                        class={styles.item}
                        style={{
                          backgroundColor: item.bgColor,
                          color: item.color
                        }}
                      >
                        <i class={item.icon}></i>
                        <span>{ item.text }</span>
                      </section>
                    })
                  }
                </div>
                <div class={styles.videoPlayer}>
                  <video
                    class={styles.video}
                    src={state.resource.url}
                    onLoadedmetadata={methods.onLoadedmetadata}
                    onTimeupdate={methods.onTimeupdate}
                    onError={methods.onError}
                    onEnded={methods.onEnded}
                  />
                  {
                    state.mode === 'frame' && <div
                      class={styles.paintArea}
                      id='paintArea'
                    >
                      <canvas />
                    </div>
                  }
                  <div class={styles.videoAction}>
                    <div class={styles.progress}>
                      <div class={styles.progressInfo}>
                        <span>{ videoName.value }</span>
                        <span v-loading={state.waiting}>{currentTime.value}/{maxTime.value}</span>
                      </div>
                      <div class={styles.progressTime}>
                        <RulerProgress
                          v-model={videoRuler.currentTime}
                          max={videoRuler.duration}
                          step={videoRuler.step}
                          step-area={videoRuler.stepArea}
                          on-change={methods.progressChange}
                          on-playend={methods.playend}
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class={styles.control}>
                  <div class={styles.basicControl}>
                    <div class={styles.title}>
                      基础控制
                    </div>
                    <div class={styles.tool}>
                      <div class={styles.action}>
                        <span
                          class={styles.prev}
                          title={state.mode === 'video' ? '快退10s' : '上一帧'}
                          onClick={() => methods.prev()}
                        />
                        <span
                          title={state.isPlaying ? '暂停' : '播放'}
                          class={{
                            [styles.isPlay]: !state.isPlaying,
                            [styles.isPause]: state.isPlaying
                          }}
                          onClick={methods.togglePlay}
                        />
                        <span
                          class={styles.next}
                          title={state.mode === 'video' ? '快进10s' : '下一帧'}
                          onClick={() => methods.next()}
                        />
                      </div>
                      {
                        state.mode === 'video' && <div class={styles.volume}>
                          <span
                            class={[state.muted ? styles.isMute : styles.isUnmute]}
                            onClick={methods.toggleVolume}
                          />
                          <el-slider
                            v-model={state.volume}
                            format-tooltip={methods.formatVolumeToolTip}
                            class={styles.slider}
                            onChange={methods.changeVolume}
                          />
                        </div>
                      }
                    </div>
                  </div>
                  {
                    state.mode === 'frame' && <div class={styles.capture}>
                      <div class={styles.title}>
                        帧捕获
                      </div>
                      <div class={styles.tool}>
                        <i
                          class={'el-icon-camera'}
                          title='捕获帧'
                          onClick={methods.captureFrame}
                        />
                        <i
                          class={['el-icon-coin', { [styles.active]: frameControl.rangeChoose }]}
                          title='帧范围'
                          onClick={methods.rangeFrame}
                        />
                        <i
                          class={['el-icon-picture-outline', { [styles.active]: frameControl.aroundOpen }]}
                          title='周围帧'
                          onClick={methods.aroundFrame}
                        />
                        <i
                          class={['el-icon-video-camera', { [styles.active]: frameControl.captureFrameInterval }]}
                          title='定时捕获帧'
                          onClick={methods.captureFrameInterval}
                        />
                      </div>
                    </div>
                  }
                </div>
                {
                  (frameControl.aroundOpen && (aroundFrameList.value.length > 0)) && <div class={styles.aroundFrame}>
                    <div class={styles.title}>
                        <i class={'el-icon-s-operation'}>周围帧预览</i>
                    </div>
                    <div class={styles.aroundFrameList}>
                      {
                        aroundFrameList.value.map((item: any) => {
                          return <el-image
                            id={item.time}
                            src={item.url}
                          />
                        })
                      }
                    </div>
                  </div>
                }
              </div>),
              right: () => (
                <div style='height: 100%;'>
                  {
                    state.mode === 'frame' && <div class={styles.captureListContainer}>
                      <div class={styles.title}>
                        <h3>已捕获的帧({ frameList.value.length })</h3>
                        <div class={styles.layoutControl}>
                          {
                            layoutList.map(item => {
                              return <div
                                class={{ [styles.active]: item.value === layout.value }}
                                onClick={() => methods.changeLayout(item)}
                              >
                                {
                                  item.label
                                }
                              </div>
                            })
                          }
                        </div>
                        <el-button
                          disabled={!frameList.value.length}
                        >
                          导出
                        </el-button>
                      </div>
                      {
                        frameList.value.length ? <ul
                          class={styles.frameList}
                          style={layoutStyle.value}
                        >
                          {
                            frameList.value.map((item) => {
                              return <li
                                key={item.time}
                              >
                                <div class={styles.controlArea}>
                                  <i
                                    class={'el-icon-download'}
                                    title='下载'
                                    onClick={() => methods.downloadImage(item)}
                                  />
                                  <i
                                    class={'el-icon-delete'}
                                    title='删除'
                                    onClick={() => methods.removeImage(item)}
                                  />
                                </div>
                                <el-image
                                  id={item.time}
                                  src={item.url}
                                />
                              </li>
                            })
                          }
                        </ul> : <div class={styles.emptyImg}>
                          <el-image
                            src={require('@/main/images/source_empty.png')}
                          />
                        </div>
                      }
                    </div>
                  }
                </div>
              )
            }}
          />
        </div>
        {
          loading.visible && <div class={styles.loading}>
            <div class={styles.progress}>
              <el-progress
                type='circle'
                percentage={percentageComputed.value}
              />
              <span>{loading.text}</span>
            </div>
          </div>
        }
      </div>
    )
  }
})
